<template>
  <div style="height:100%;">
    <el-table :data="taskListArr" style="width: 100%;height:100%;" class="tableCon"  size="mini" highlight-current-row cell-class-name="batchtablecell"
      key="caiyangrenwu">
      <el-table-column label="序号" width="49px" >
        <template slot-scope="scope">
          {{scope.$index+1}}
        </template>
      </el-table-column>
      
      <el-table-column label="样品编号" min-width="90px"  prop="code" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="样品名称" min-width="90px"  prop="name" show-overflow-tooltip>
      </el-table-column>
      <el-table-column  label="采样时间" min-width="145px" prop="factDate" :formatter = "formatterDate">

      </el-table-column>
      <el-table-column  label="接样时间" min-width="145px" prop="acceptDate" :formatter = "formatterDate">
        
      </el-table-column>
      <el-table-column label="采样人" min-width="90px" prop = "factManName" >
        <template slot-scope="scope">
          {{scope.row.factManName == undefined || scope.row.factManName == null || scope.row.factManName == "" ?"---" :scope.row.factManName }}
        </template>
      </el-table-column>

      <el-table-column label="接收人" min-width="90px" prop = "acceptManName">
        <template slot-scope="scope">
          {{scope.row.acceptManName == undefined || scope.row.acceptManName == null || scope.row.acceptManName == "" ?"---" :scope.row.acceptManName }}
        </template>
      </el-table-column>
      <el-table-column label="样品性状" min-width="90px" prop = "propertyTwo">
        <template slot-scope="scope">
          {{scope.row.propertyTwo == undefined || scope.row.propertyTwo == null || scope.row.propertyTwo == "" ?(scope.row.propertyOne == undefined || scope.row.propertyOne == null || scope.row.propertyOne == "" ? "---":scope.row.propertyOne) :scope.row.propertyTwo }}
        </template>
      </el-table-column>
      <el-table-column label="样品状态" min-width="90px" prop = "status" :formatter="formatterStatus">
      </el-table-column>
      <el-table-column label="操作"  min-width="100px">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="samlpeDetail(scope.row)">详情</el-button>
              </template>
            </el-table-column>


    </el-table>
    <sampleDetail :addVisible.sync = "sampleDetailShow" :sampleInfo = "sampleInfo"></sampleDetail>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import sampleDetail from '../children/sampleDetail.vue'
  export default {
    data() {
      return {
        taskListArr: [],
        sampleDetailShow:false,
        sampleInfo:{},
      }
    },
    computed: {
      ...mapState(['taskSampleStatus', '']),
      taskListTableHeight: function () {
        return (window.innerHeight - 360)
      },
    },
    props: ['getPlanData','title'],
    mounted() {
      this.init();
    },
    // sampleDetail
    components: {
      sampleDetail
    },
    methods: {
      formatterDate(row, column, cellValue) {
        if(cellValue != undefined){
           return cellValue.slice(0, cellValue.indexOf("."));
        }else{
          return "---"
        }
      },
      // 处理状态
      formatterStatus(row, column, cellValue, index) {
        return this.util.changeStatus({ cellValue: cellValue, list: this.taskSampleStatus })
      },
      init() {
        var id = this.getPlanData.id
        this.$http({
          method: 'post',
          apiUrl: '/detection/readSampleByTask.htm',
          params: {id:id},
          isJson:false,
        }).then(res => {
          if (res.code == 0) {
            this.taskListArr = res.data;
          }
        })
      },
      // 样品详情
      samlpeDetail(row){
        console.log(row)
        //
        this.$http({
          method: 'post',
          apiUrl: '/detection/readSampleDetById.htm',
          params: {id:row.id},
          isJson:false,
        }).then(res => {
          if (res.code == 0) {
            console.log(res.data)
            this.sampleInfo = res.data;
            this.sampleDetailShow = true;
          }
        })

      }

    }
  }

</script>

<style>

</style>
